<template>
  <div>
    <el-form
      :inline="true"
      :model="form"
      size="small"
      class="searchForm bg-gray flex flex-wp flex-a-c"
    >
      <el-form-item label="商品名称">
        <el-input v-model="form.productName"></el-input>
      </el-form-item>

      <el-form-item label="商品分类">
        <el-select
          v-model="form.classifyId"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option v-for="item in classificList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品状态:">
        <el-select
          v-model="form.publishStatus"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option label="下架" :value="0"></el-option>
          <el-option label="上架" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="库存状态:">
        <el-select
          v-model="form.skuStatus"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option label="无库存" :value="0"></el-option>
          <el-option label="有库存" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否热销推荐:">
        <el-select
          v-model="form.hotRecommend"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option label="否" :value="0"></el-option>
          <el-option label="是" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="款式编码">
        <el-input v-model="form.spuCode"></el-input>
      </el-form-item>
      <el-button icon="el-icon-search" @click="search()" size="small"
        >查询</el-button
      >
      <el-button size="small" @click="syncData()"
        >同步商品信息</el-button
      >
      <el-button
        size="small"
        type="success"
        v-if="multipleSelection.length != 0"
        @click="changeManyState(1)"
        >批量上架</el-button
      >
      <el-button
        size="small"
        type="danger"
        v-if="multipleSelection.length != 0"
        @click="changeManyState(0)"
        >批量下架</el-button
      >
    </el-form>
     <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :row-key="getRowKeys"
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column :reserve-selection="true" type="selection" width="40" align="center">
      </el-table-column>
      <el-table-column
        prop="coverImage"
        label="图片"
        align="center"
        width="160"
      >
        <template slot-scope="scope">
          <img alt="" style="width: 100px;height: 100px" :src="scope.row.coverImage"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="spuCode"
        label="款式编码"
        align="center"
      ></el-table-column>
      <el-table-column
        width="160"
        prop="productName"
        label="商品名称"
        align="center"
      ></el-table-column>
      <el-table-column
        width="160"
        prop="classifyName"
        label="商品分类"
        align="center"
      ></el-table-column>
      
      <el-table-column prop="publishStatus" label="商品状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.publishStatus == 0 ? "下架" : "上架" }}
        </template>
      </el-table-column>
      <el-table-column
        width="160"
        prop="salesPrice"
        label="基本售价"
        align="center"
      ></el-table-column>
      <el-table-column
        width="160"
        prop="marketPrice"
        label="成本价"
        align="center"
      ></el-table-column>
      <el-table-column
        width="160"
        prop="stockNum"
        label="库存数"
        align="center"
      ></el-table-column>
      <el-table-column
        width="160"
        prop="brand"
        label="品牌"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        width="160"
        prop="inviteesUserName"
        label="供应商名称"
        align="center"
      ></el-table-column>
      <el-table-column
        width="160"
        prop="inviteesUserName"
        label="供应商款式编码"
        align="center"
      ></el-table-column> -->
      <el-table-column
        width="160"
        prop="soldUnit"
        label="累计销售"
        align="center"
      ></el-table-column>
      <el-table-column label="是否热销推荐" align="center">
        <template slot-scope="scope">
          <el-switch
            @change="(hotRecommend) => setActivityStatus(scope.row, hotRecommend)"
            :value="scope.row.hotRecommend"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="200">
        <template slot-scope="scope">
          {{ new Date(scope.row.addTime).Format("YYYY-MM-DD hh:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" width="200">
        <template slot-scope="scope">
          {{ new Date(scope.row.updateTime).Format("YYYY-MM-DD hh:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="350"
        class-name="actionTd"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            round
            @click="showDetail(scope.row.id)"
          >
            详情</el-button
          >
          <el-button
            size="mini"
            round
            v-if="scope.row.publishStatus === 0"
            @click="editStatus(scope.row.id, 1)"
            type="success"
          >
            上架</el-button
          >
          <el-button
            size="mini"
            round
            type="danger"
            v-if="scope.row.publishStatus === 1"
            @click="editStatus(scope.row.id, 0)"
          >
            下架</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="商品详情"
      :visible.sync="rateVisible"
    >
      <RateDetail :id="shopId"/>
    </el-dialog>
    
  </div>
</template>
<script>
import RateDetail from "./rateDetail.vue";

export default {
  data() {
    return {
      form: {
        classifyId: "",
        productName: "",
        publishStatus: '',
        skuStatus: '',
        hotRecommend: '',
        spuCode: ''
      },
      qdForm: {},
      shopId: 0,
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }, //页码
      tableData: [], //表格数据
      classificList:[], //商品分类列表
      multipleSelection: [],
      rateVisible: false,
    };
  },
  components: {
    RateDetail,
  },
  beforeMount() {
    this.getClassifyList()
    this.search();
  },
  methods: {
    getRowKeys(row) {
				return row.id;
			},
    handleSelectionChange(data) {
      console.log(data);
      this.multipleSelection = data;
    },
    syncData() {
      const loading = this.$loading({
        lock: true,
        text: "正在同步...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .postData("adm/product/sync")
        .then((data) => {
          loading.close();
          this.search()
          // this.tableData = data.resData.data;
          // this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    search() {
      this.qdForm = {
        ...this.form,
      };
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }; //页码
      this.getDataList();
    },
    changeManyState(status) {
      let ids = [];
      this.multipleSelection.forEach((item) => {
        ids.push(item.id);
      });
      if (typeof ids !== "object") {
        ids = [ids];
      }
      if (ids.length === 0) {
        return;
      }
      this.$confirm(`是否确定${status == 1 ? "上架" : "下架"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$ajax
            .postData("adm/product/batchUpOrDown", {
              idList:ids,
              publishStatus:status,
            })
            .then((data) => {
              loading.close();
              this.$message({
                type: "success",
                message: `${status == 1 ? "上架" : "下架"}成功!`,
              });
              this.getDataList();
            })
            .catch((error) => {
              loading.close();
              this.$message({
                message: error.codeDes || error.message,
                type: "error",
              });
            });
        })
        .catch(() => {});
    },
    getClassifyList() {
      let params = {
        pid:0
      };
      this.loading = true;
      this.$ajax
        .getData("member/classify/pub/getList", params)
        .then((data) => {
          this.loading = false;
          this.classificList = data.resData;
        })
        .catch((error) => {
          this.loading = false;
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    getDataList() {
      let params = {
        pageNum: this.pageInfo.pageindex,
        pageSize: this.pageInfo.pagesize,
        ...this.qdForm,
      };
      this.loading = true;
      this.$ajax
        .getData("adm/product/getList", params)
        .then((data) => {
          this.loading = false;
          this.tableData = data.resData.data;
          this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          this.loading = false;
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    showDetail(id) {
      this.shopId = id
      this.rateVisible = true
    },
    editStatus(id, publishStatus) {
      this.$confirm(`是否确定${publishStatus == 1 ? "上架" : "下架"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$ajax
            .postData("adm/product/upOrDown", {
              id,
              publishStatus,
            })
            .then((data) => {
              loading.close();
              this.$message({
                type: "success",
                message: `${publishStatus == 1 ? "上架" : "下架"}成功!`,
              });
              this.getDataList();
            })
            .catch((error) => {
              loading.close();
              this.$message({
                message: error.codeDes || error.message,
                type: "error",
              });
            });
        })
        .catch(() => {});
    },
    //设置活动状态
    setActivityStatus(item, hotRecommend) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .postData("adm/product/hotRecommend", {
          id: item.id,
          hotRecommend: hotRecommend,
        })
        .then((data) => {
          loading.close();
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.getDataList();
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
  },
};
</script>

<style scoped>
img {
  width: 100px;
}
</style>